@use 'sass:map';
@use 'sass:color';

.to-bottom {
  // 整块离底部的距离
  margin-bottom: 24px;
}

.to-right {
  // 小块离右边的距离
  margin-right: 24px;
}

// 取消/确定 按钮
.confirm-button {
  text-align: right;
  margin: auto 8px 8px auto; // 自带16+现加8=24px

  .confirm-button-cancel {
    width: 70px;
    height: 27px;
    margin-right: 12px; // 自带12 + 现设12 = 24px
    border-color: $color-primary;
    color: $color-primary;
    border-radius: 2px;
    opacity: 1;
  }

  .confirm-button-cancel:hover {
    opacity: 0.6;
  }

  .confirm-button-submit {
    width: 70px;
    height: 27px;
    border-radius: 2px;
  }
}

// 列表的 查看 列
.tableColumn-look {
  margin-top: 2px;
}

// 运维首页
.ope-homePage,
.order-statistics {
  .weekOrMonth-radioGroup {
    border-radius: 4px;
    opacity: 1;
    margin-bottom: 24px;
    margin-right: 24px;

    :global {
      // 单选按钮组
      .el-radio-button__inner {
        width: 80px;
        height: 32px;
      }
    }
  }

  // 个人统计 搜索按钮、重置
  .order-statistics-search,
  .order-statistics-refresh {
    width: 98px;
    height: 32px;
  }

  // 个人统计 顶部按钮间距 自带的12 + 现设的12 = 24px
  .order-statistics-search {
    margin-right: 12px;
  }

  // 运维首页、个人统计，数量
  .perNum-add,
  .perNum-deal,
  .perNum-overTime,
  .perNum-patDeal,
  .perNum-patoverTime,
  .perNum-arrange,
  .perNum-completed {
    width: 190px;
    height: 88px;
    justify-content: left;
    border-radius: 8px;
    opacity: 1;
    text-align: left;
    margin: 0 16px 0 0;
    color: map.get($colors, 'white');

    .perNum-span {
      font-size: map.get($font-size, 'extra-large');
      font-weight: 400;
      font-family: Bahnschrift-Regular, Bahnschrift;
    }

    :global {
      .el-card__body {
        padding: 16px 24px 16px 16px;
      }
    }
  }

  // 数量展示的图标
  .perNum-icon {
    font-size: map.get($font-size, 'extra-large');
    opacity: 0.2;
    margin-top: 6px;
    margin-left: 11px;
  }

  .perNum-add {
    background-image: url('/public/opeHomePage/addBg.png'); // 新增背景
  }

  .perNum-deal {
    background-image: url('/public/opeHomePage/dealBg.png'); // 工单处理背景
  }

  .perNum-overTime {
    background-image: url('/public/opeHomePage/overTimeBg.png'); // 超时工单背景
  }

  .perNum-patDeal {
    background-image: url('/public/opeHomePage/patDealBg.png'); // 巡视处理背景
  }

  .perNum-patoverTime {
    background-image: url('/public/opeHomePage/patoverTimeBg.png'); // 巡视超时背景
  }

  .perNum-arrange {
    background-image: url('/public/opeHomePage/arrangeBg.png'); // 工单约时背景
  }

  .perNum-completed {
    background-image: url('/public/opeHomePage/completedBg.png'); // 已完成工单背景
  }

  // 查看更多
  .look-more {
    text-align: right;
    margin-top: -22px;

    .look-more-font {
      font-size: map.get($font-size, 'small');
    }
  }
}

// 工单统计
.order-statistics {
  :global {
    .el-radio-group {
      vertical-align: middle;
    }

    .el-card__body {
      padding: 0;
    }

    .el-scrollbar {
      --el-scrollbar-bg-color: var(--el-color-primary);
      --el-scrollbar-hover-bg-color: var(--el-color-primary);
    }
  }

  // 标题头
  .statistic-title {
    background-color: map.get($border-color, 'lighter');
    padding-left: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  // 柱状图 报修来源同比环比分析
  .statistic-BarChart {
    margin: 11px;
  }

  // 饼图 工区部门统计
  .statistic-PieChartDpt {
    margin-left: -20%;
    margin-right: 15%;
  }

  // 半透明圆环 相对ElCard定位
  .statistic-cards {
    position: relative;
    margin-right: 24px;

    // 报修来源统计
    .statistic-repairCircle {
      width: 93px;
      height: 93px;
      border-radius: 50%;
      border: 11px solid color.adjust($color-white, $alpha: -0.7);
      position: absolute;
      top: 43.5%;
      left: 41.2%;
      z-index: 1;
    }

    // 工区部门统计
    .statistic-workAreaCircleGray {
      width: 168px;
      height: 168px;
      border-radius: 50%;
      border: 22px solid color.adjust($color-info, $alpha: -0.8);
      box-shadow: inset 0 -4px 0 color.adjust($color-info, $alpha: -0.7);
      position: absolute;
      top: 34.1%;
      left: 16.2%;
      z-index: 1;
    }

    .statistic-workAreaCircleLine {
      width: 146px;
      height: 144px;
      border-radius: 50%;
      border: 1px solid color.adjust($color-info, $alpha: -0.7);
      position: absolute;
      top: 40%;
      left: 21.5%;
      z-index: 1;
    }
  }

  // 工区处理统计
  .order-deal {
    display: flex;
    flex-wrap: wrap;

    .order-elcard {
      background-color: map.get($border-color, 'extra-light');
      width: 43%;
      margin: 17px 24px;

      .order-mar {
        margin: 16px 17px;

        .icon-num {
          margin-top: 3px;
          color: color.adjust($color-primary, $alpha: -0.7);
        }
      }
    }
  }
}

// 饼图 报修来源
.pie-chart {
  .statistics-map {
    height: 470px;
  }
}

// 新增、编辑工单 标题
.ordersUpdate-title {
  margin: auto auto 15px 30px;
}

// 新增、编辑工单
.ordersUpdate-form {
  width: 52%;
  margin-right: 70px;
  float: left;

  :global {
    .el-select {
      width: 100%;
    }
  }

  .inputTextarea-showLimit {
    // 多文本输入框 尾插槽 显示剩余可输数
    color: map.get($text-color, 'placeholder');
    position: absolute;
    top: 5px;
    right: 8px;
  }

  .ordersUpdate-defectAddress {
    :global {
      .el-input__inner {
        padding-right: 27px !important;
      }
    }
  }
}

// 新增/编辑工单、工大设置->新增故障原因，多行输入框
.ordersUpdate-elFormItemRows {
  :global {
    .el-input__inner {
      height: 48px;
    }

    .el-textarea__inner {
      height: 65px;
      padding-right: 65px;
    }
  }

  span {
    color: map.get($text-color, 'placeholder');
    position: absolute;
    top: 5px;
    right: 22px;
  }
}

// 新增、编辑工单地图模块
.ordersUpdate-map {
  flex: 1;
  overflow: hidden;

  > :global(section) {
    height: 100%;
  }
}

.order-title {
  font-size: map.get($font-size, 'medium');
}

// 工单列表 - 地图展示
.order-map-box {
  overflow: hidden;
  position: relative;

  #order-map-box-container,
  #order-hot-map-box-container {
    height: calc(100vh - 152px);
  }

  .order-map-content {
    position: absolute;
    top: 24px;
    left: 24px;
    height: calc(100% - 48px);
    width: 400px;
    box-sizing: border-box;

    :global(.el-card__body) {
      height: calc(100% - 48px);
    }

    .order-map-content-total-list {
      list-style-type: none;
      padding: 0 10px;
      margin-bottom: 20px;
      overflow: hidden;
      display: flex;
      gap: 10px;

      .order-map-content-total-list-item {
        flex: 1;
        padding: 4px 2px 2px;
        font-size: map.get($font-size, 'extra-large');
        color: $color-primary;
        text-align: center;
        background-color: color.adjust($color-primary, $lightness: 34%);
        border: 1px solid $color-primary;
        position: relative;

        &::before {
          content: '';
          display: block;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          height: 50%;
          border-bottom: 1px solid color.adjust($color-primary, $lightness: 20%);
        }

        :global(span) {
          position: relative;
          z-index: 1;
        }
      }
    }

    .order-map-content-list {
      box-sizing: border-box;
      position: relative;
      height: calc(100% - 174px);

      :global {
        .el-scrollbar {
          margin-top: 10px;
          margin-bottom: 10px;

          .el-scrollbar__view {
            overflow-x: hidden;
          }
        }
      }
    }

    .order-map-content-search-form {
      width: 100%;
      height: 0;
      box-sizing: border-box;
      padding: 0 10px;
      position: absolute;
      white-space: nowrap;
      top: 0;
      left: 0;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      transition: height 0.5s, padding 0.8s;
      background-color: color.adjust($color-white, $alpha: 0);
      z-index: 1;

      &.order-map-content-search-form-show {
        height: 330px;
        padding: 10px 10px 0;
      }

      :global {
        .el-form-item {
          width: 100%;

          &:last-child .el-form-item__content {
            justify-content: center;
          }

          .el-form-item__label {
            padding-left: 10px;
          }

          .el-date-editor {
            background-color: $color-white;
          }
        }
      }
    }

    .order-map-content-description :global {
      .el-descriptions__label {
        display: inline-block;
        min-width: 100px;
        text-align: right;
        color: $color-info;
      }

      .el-descriptions__body {
        padding: 12px 10px 0;
        border-bottom: 1px solid map.get($border-color, 'extra-light');

        .el-descriptions__table tr:first-child .el-descriptions__content {
          float: right;
        }

        .el-descriptions__cell {
          font-size: map.get($font-size, 'base');
        }
      }
    }

    .order-map-pagination :global(.el-pager) {
      margin: 0 auto;
    }
  }

  .order-map-btns {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: $color-white;
    padding: 0 0 0 10px;
    border-radius: 20px;
  }
}

// 工单设置 新增/编辑
.orderSet-assess {
  margin: 8px auto 24px; // 自带16+8=24px
}

// 工单设置
.orderSet-input {
  width: 75%;

  .orderSet-hours {
    color: $color-black;
  }
}

// 工单设置 内容
.orderSet-content {
  text-align: center;
  margin-top: 24px; // 原16+现24=40
  margin-bottom: 60px;

  .orderSet-largeFont {
    font-size: map.get($font-size, 'base'); // 16px
    margin-bottom: 24px;
  }

  .orderSet-grayFont {
    color: map.get($text-color, 'secondary');
  }
}

// 工单设置 列表左上角的新增按钮
.orderSet-addBtn {
  width: 102px;
  height: 32px;
  margin-bottom: 24px;
  margin-top: 8px;
}

// 工单设置 故障原因
.orderSet-why {
  margin: 25px 25px 31px;
}

// 工单设置 运维部门管理 新增/编辑 包裹tag标签们
.operationsManage-tags {
  width: 100%;
  height: 100%;
  border: 1px solid color.adjust($color-info, $alpha: -0.7);
  border-radius: map.get($border-radius, 'base');

  .tags-spacing {
    margin-right: 11px;
  }
}

// 工单设置 运维部门管理 新增/编辑 弹窗
.operationsManage-dialog {
  padding-right: 11px;
}

// 工单设置 运维部门管理 新增/编辑 对应工区
.operationsManage-dynamic {
  height: 255px;

  .dynamic-scrollbar {
    width: 100%;

    // 去表格内边框
    .dynamic-table {
      td {
        border: none;
      }
    }
  }

  :global {
    .el-scrollbar {
      --el-scrollbar-bg-color: var(--el-color-primary);
      --el-scrollbar-hover-bg-color: var(--el-color-primary);
    }
  }
}

:global {
  .el-overlay {
    z-index: 2003 !important;
  }
}

.order-info-descriptions {
  :global {
    .el-descriptions__label {
      width: 84px;
      display: inline-block;
      text-align: right;
      color: $color-info;
    }

    .el-descriptions__content {
      color: map.get($text-color, 'primary');
    }
  }
}

#order-info-map {
  height: 100%;
}

#order-gis-map {
  height: 500px;
}

.order-el-image {
  width: 80px;
  height: 80px;
  border-radius: map.get($border-radius, 'base');
}

// 工单详情
.order-card :global(.el-card__body) {
  position: relative;
}

// 工单标签页右上角按钮样式
.order-tab-option-btns {
  z-index: 1;
  position: absolute;
  right: 12px;
  top: 28px;
}

// 新增巡视 新增台区按钮
.patrol-area {
  margin-top: 120px;
  margin-left: 22px;

  .patrol-area-btn {
    text-align: right;
    margin-bottom: 11px;
  }
}

// 新增巡视 提交/取消按钮
.patrol-submitAndCancel-btn {
  text-align: center;
  margin-top: 88px;
}

.patrolUpdate-map {
  // flex: 1;
  overflow: hidden;

  > :global(section) {
    height: 400px;
  }
}

.process-time-line {
  padding-left: 88px;
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;

  :global {
    .el-timeline-item {
      .el-timeline-item__tail {
        border-left: 2px dashed var(--el-timeline-node-color);
      }

      .el-timeline-item__node {
        border-width: 1px;
        border-style: solid;
        background-color: $color-white;

        &.el-timeline-item__node--primary::after {
          content: '';
          display: block;
          border-radius: 50%;
          background-color: $color-primary;
          width: 8px;
          height: 8px;
        }
      }

      .el-timeline-item__timestamp {
        margin-top: 0;
        position: absolute;
        left: -80px;
        top: 4px;
        width: 76px;
      }

      .el-card {
        border-color: color.adjust($color-info, $alpha: -0.9);

        &:hover {
          background-color: color.adjust($color-primary, $alpha: -0.9);
          border-color: $color-primary;
        }

        .el-card__body {
          padding: calc(map.get($card, 'padding') / 2);
          background-color: color.adjust($color-info, $alpha: -0.9);
        }
      }

      .el-descriptions.time-line-descriptions {
        .el-descriptions__body {
          background-color: transparent;
        }

        .el-descriptions__label {
          display: inline-block;
          min-width: 85px;
          text-align: right;
          color: $color-info;
        }
      }
    }
  }
}

.option-button-list {
  justify-content: end;
  width: 100%;
}

.basicInformation-same-width {
  :global {
    .el-input,
    .el-textarea__inner {
      width: 190px;
    }
  }
}
